<template>
    <div class="goods_list">
        <div class="user-data">
            <div class="user-data__table">
                <a-table
                    :columns="columns"
                    :data-source="dataSource"
                    :pagination="pagination"
                    :loading="loading"
                    :scroll="{ x: 1080, y: 540 }"
                >
                    <template v-for="item in columns" :key="item.dataIndex" v-slot:[item.slotName]>
                        <span>{{ t(`yl.${item.slotName}`) }}</span>
                    </template>
                    <template #enabled="{ record }">
                        <a-switch
                            v-model:checked="record.enabled"
                            @change="
                                (val) => {
                                    changeSwitch(val, record);
                                }
                            "
                        />
                    </template>
                    <template #customAction="{ record }">
                        <a-button class="action-btn" @click="handleEditUser(record)" type="primary" size="small">
                            <template #icon>
                                <EditOutlined />
                            </template>
                        </a-button>
                        <a-popconfirm placement="topRight" @confirm="handleDelete(record.id)">
                            <template #title>
                                <p>{{ t('yl.deleteConfirmtext') }}</p>
                            </template>
                            <a-button class="action-btn" type="danger" size="small">
                                <template #icon>
                                    <Delete />
                                </template>
                            </a-button>
                        </a-popconfirm>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed, onUnmounted, reactive, toRefs, watch, createVNode } from 'vue';

import { useI18n } from 'vue-i18n';
import { PaginationQuery } from '@/types/table';
import { message, Modal } from 'ant-design-vue';
import columns from './listColumns';
import useTables from './listTable';

interface State {
    modalTitle: string;
    confirmLoading: boolean;
    selectedNodeKeys: (string | number)[];
}

export default defineComponent({
    name: 'user',
    components: {},

    setup() {
        const { t } = useI18n();
        let { selectedRow, getUsersData, tableQuery, visible } = useTables;
        return {
            columns,
            t,
        };
    },
});
</script>

<style lang="scss" scoped>
.user {
    @include flex;
    width: 100%;
    &-dept {
        flex-basis: 200px;
        min-width: 200px;
    }
    &-data {
        flex: 1;
        padding-left: $width20;
        &__filter {
            @include flex;
        }
        &__table {
            padding: $width20 $width0;
            .multi-action {
                background: $white;
            }
        }
    }
}
</style>
